<template>
	<view class="game-container">
		<scroll-view class="container" scroll-y @scroll="handleScroll" @scrolltolower="onLower">
			<view v-if="listData && listData.length" class="list">
				<view class="item" v-for="item in listData" :key="item.id" @click="goDetails(item)">
					<div>
						<image class="icon" :src="item.img" mode="aspectFit" alt='图片加载失败'></image>
					</div>
					<view class="title">{{ item.name }}</view>
				</view>
			</view>
			<view v-if="!loading&&listData&&!listData.length" class="empty">
				<image src="@/static/images/empty.png" mode="aspectFit" style="width: 100%;"></image>
			</view>
			<!-- <view v-if="loading" class="loading">加载中...</view> -->
		</scroll-view>
	</view>
</template>

<script>
	import {
		enterGame,
		openGold,
		gameList
	} from '@/api/game';
	import {
		uploadToImg
	} from '@/utils/file';

	const imageCache = {};

	export default {
		data() {
			return {
				flag: false,
				listData: [],
				page: 1,
				limit: 10,
				loading: false,
				hasMore: true,
			};
		},
		onShow() {
			this.getGameList();
			if (this.flag) {
				openGold().then(res => {
					if (res.status == 0) {
						this.flag = false;
					}
				});
			}
		},
		methods: {
			goDetails(item) {
				const {
					url
				} = this.$store.state.user.user;
				enterGame({
					gameId: item.id,
				}).then(res => {
					if (res.status == 0) {
						window.open(res.data.url);
						this.flag = true;
					}
				});
			},
			async getGameList(isLoadMore = false) {
				if (!this.hasMore || this.loading) return;
				this.loading = true;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});

				try {
					const res = await gameList({
						page: this.page,
						limit: this.limit
					});


					if (res.data && res.data.length > 0) {
						const batchSize = 5; // 设置并发数量
						const processBatch = async (batch) => {
							await Promise.all(batch.map(async v => {
								v.img = await uploadToImg(v.img);
							}));
						};

						for (let i = 0; i < res.data.length; i += batchSize) {
							const batch = res.data.slice(i, i + batchSize);
							await processBatch(batch);
						}

						if (isLoadMore) {
							this.listData = this.listData.concat(res.data);
						} else {
							this.listData = res.data;
						}

						this.page++;
					} else {
						this.hasMore = false;
					}
				} catch (error) {
					console.error("获取游戏列表时出错:", error);
				} finally {
					this.loading = false;
					uni.hideLoading()
				}
			},
			handleScroll(e) {
				// 处理滚动事件，可以根据需要添加额外逻辑
			},
			onLower() {
				this.getGameList(true);
			},
		},
	};
</script>

<style lang="scss">
	.list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-items: center;
		padding: 20rpx;

		.icon {
			width: 200rpx;
			height: 200rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			text-align: center;
			margin: 20rpx 0;
			color: var(--txt-color-black);
			// font-weight: bold;
		}
	}

	.loading {
		text-align: center;
		margin-top: 20rpx;
		color: var(--txt-color-gray);
	}
</style>